<template>
  <div ref="myChartsRef" class="echart" :option="option" />
</template>
<script setup>
import { init } from "echarts";
import { ref, onMounted, onBeforeUnmount } from "vue";
import { fontSize } from "@/utils/px2rem.js";
import { getDepartPjslqs } from '@/api/bmfx.js'
import { getDate } from '@/utils/index.js'
const { getYearStartDate, getYearEndDate } = getDate()
const queryPjslqs = () => {
  const params = {
    starttime: getYearStartDate(),
    endtime: getYearEndDate(),
  }
  getDepartPjslqs(params).then(res => {
    initChart(res.data.data)
  })
}

const myChartsRef = ref();
let myChart;

// 初始化echarts
const initChart = (data) => {
  const option = {
    tooltip: {
      show: false,
    },
    grid: {
      left: fontSize(16),
      top: fontSize(60),
      right: fontSize(16),
      bottom: 0,
      containLabel: true,
    },
    legend: {
      right: 0,
      top: fontSize(10),
      itemWidth: fontSize(10),
      itemHeight: fontSize(10),
      textStyle: {
        color: "#D0DEEE",
        fontSize: fontSize(12),
      },
    },
    xAxis: {
      type: "category",
      nameTextStyle: {
        fontSize: fontSize(13),
        color: "#D0DEEE",
      },
      axisTick: {
        show: false, //隐藏X轴刻度
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#6487A9",
        },
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: "#D0DEEE", //更改坐标轴文字颜色
        },
      },
      data: data.map(item => item.sj),
    },

    yAxis: [
      {
        type: "value",
        name: "(天)    ",
        nameTextStyle: {
          color: "#D0DEEE",
          fontSize: fontSize(12),
          align: "right",
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(108, 128, 151, 0.3)",
            type: "dashed",
          },
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: true,
          textStyle: {
            fontSize: fontSize(13),
            color: "#D0DEEE",
            padding: [0, fontSize(8), 0, 0],
          },
        },
      },
    ],
    color: ["#159AFF"],
    series: [
      {
        name: "平均审理天数",
        type: "bar",
        barWidth: fontSize(11),
        label: {
          show: true,
          color: "#D0DEEE",
          position: "top",
          fontSize: fontSize(12),
        },
        itemStyle: {
          color: {
            type: "linear",
            x: 0, // 右
            y: 1, // 下
            x2: 0, // 左
            y2: 0, // 上
            colorStops: [
              {
                offset: 0,
                color: "rgba(21, 154, 255, 0)", // 100% 处的颜色
              },
              {
                offset: 0.6,
                color: "rgba(21, 154, 255, 1)", // 100% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(209, 235, 255, 1)", // 0% 处的颜色
              },
            ],
          },
        },
        data: data.map(item => item.ajs),
      },
    ],
  };
  if (myChart !== undefined) {
    myChart.dispose();
  }
  myChart = init(myChartsRef.value);
  // 拿到option配置项，渲染echarts
  myChart?.setOption(option, true);
};

// 重新渲染echarts
let timer = null;
const resizeChart = () => {
  timer = setTimeout(() => {
    if (myChart) {
      myChart.resize();
    }
  }, 500);
};

onMounted(() => {
  queryPjslqs()
  window.addEventListener("resize", resizeChart);
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", resizeChart);
  clearTimeout(timer);
  timer = 0;
});

// watch(
//   option,
//   () => {
//     initChart();
//   },
//   {
//     deep: true,
//   }
// );
</script>
<style lang="scss" scoped>
.echart {
  width: 100%;
  height: calc(100% - 60px);
}
</style>
